<template>
  <BaseCard title="数据概况">
    <div class="list">
      <div class="item" :key="index" v-for="(item, index) in list">
        <span class="label">{{ item.label }}</span>
        <BaseRollNum class="value" :number="item.value" />
      </div>
    </div>
  </BaseCard>
</template>

<script>
import * as Ajax from '@/api/dashboard';
export default {
  data() {
    return {
      list: [
        { label: 'ROI', value: 0 },
        { label: '支出', value: 0 },
        { label: '营收', value: 0 },
        { label: '注册量', value: 0 },
        { label: '表单量', value: 0 },
        { label: '机构匹配量', value: 0 },
        { label: '机构进件量', value: 0 },
        { label: 'API成功量', value: 0 },
        { label: '产品点击量', value: 0 },
        { label: '推送率', value: 0 },
      ],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData(time) {
      Ajax.getPageIndex(time).then(({ success, data }) => {
        if (success) {
          const { roi, outLay, income, regNum, formNum, institutionMatchNum, institutionApplyNum, apiNum, appNum, pushRate } = data;
          this.list[0].value = roi || 0;
          this.list[1].value = outLay || 0;
          this.list[2].value = income || 0;
          this.list[3].value = regNum || 0;
          this.list[4].value = formNum || 0;
          this.list[5].value = institutionMatchNum || 0;
          this.list[6].value = institutionApplyNum || 0;
          this.list[7].value = apiNum || 0;
          this.list[8].value = appNum || 0;
          this.list[9].value = pushRate || 0;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  display: flex;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .label {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 2px;
  }

  .value {}

  :deep(.num-2) {
    font-size: 18px;
    font-weight: bold;
    color: #1890ff !important;
  }
}
</style>
